<template>
	<div id="detail">
		<!-- 详情页底部导航 -->
		<detail-nav-bar class="detail-nav" @NavBarTitle="NavBarTitle" ref="nav"/>
		
		<!-- 滚动 -->
		<scroll class="content" 
						ref="scroll" 
						@scroll="contentScroll" 
						:probe-type="3">
		<!-- 轮播 -->
			<detail-swiper :topImages="topImages"/>		
			<!-- 商品基本信息 -->
			<detail-base-info :goods="goods"/>
			<!-- 店铺信息 -->
			<detail-shop-info :shop="shop"/>
			<!-- 图片展示 -->
			<detail-goods-info :detailInfo="detailInfo" @imageLoad="imgageLoad"/>
			<!-- 尺码信息 -->
			<detail-param-info ref="param" :param-info="paramInfo"/>
			<!-- 用户品论信息 -->
			<comment-info ref="comment" :commentInfo="commentInfo"/>
			<!-- 推荐商品 -->
			<goods-list ref="recommend" :goods="recommend" />
		</scroll>
		<!-- 一箭返回顶部 -->
		<back-top @backtop="BackTop" v-show="isShowTop"/>
		<!-- 加入购物车 -->
		<detail-bottom-bar @addCart="addToCart"/>
		<!-- 加入购物车成功弹窗 -->
		<!-- <toast :message="message" :show="show"/> -->
		
	</div>
</template>

<script>
	import DetailNavBar from './childComps/DetailNavBar.vue'
	import DetailSwiper from './childComps/DetailSwiper.vue'
	import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
  import Scroll from 'components/common/scroll/Scroll.vue'
	import DetailShopInfo from './childComps/DetailShopInfo.vue'
	import DetailGoodsInfo from './childComps/DetailGoodsInfo.vue'
	import DetailParamInfo from './childComps/DetailParamInfo.vue'
	import CommentInfo from './childComps/CommentInfo.vue'
	import GoodsList from 'components/content/goods/GoodsList.vue'
	import DetailBottomBar from './childComps/DetaBottomBar.vue'
	import BackTop from 'components/content/backTop/BackTop.vue'
	// import Toast from 'components/common/toast/Toast.vue'
	
	import {mapActions} from 'vuex'
	
	import {getDetail, Goods, Shop, GoodsParam, getRecommend} from 'network/detail.js'
	export default{
		name:'Detail',
		components:{
			DetailNavBar,
			DetailSwiper,
			DetailBaseInfo,
			Scroll,
			DetailShopInfo,
			DetailGoodsInfo,
			DetailParamInfo,
			CommentInfo,
			GoodsList,
			DetailBottomBar,
			BackTop,
			// Toast
		
		},
		
		data(){
			return{
				iid:null,
				topImages:[],
				goods: {},
				shop: {},
				detailInfo:{},
				paramInfo:{},
				commentInfo:{
					user:{}
				},
				recommend:[],
				isShowTop:false,
				themeTopYs:[],//记录滚动y轴坐标
				currentIndex:0
				// message:'',
				// show:false
			}
		},
		created() {
			//1.保存传入的iid
			this.iid = this.$route.params.iid
			//2.根据iid请求详情数据
			getDetail(this.iid).then(res => {
				//1.获取轮播图数据
				const data = res.data.result; //提取相同的
				this.topImages = data.itemInfo.topImages
				
				//2.获取商品信息
				this.goods = new Goods(
					data.itemInfo, 
					data.columns, 
					data.shopInfo.services
				);
				
				//3.创建店铺信息的对象
				this.shop =new Shop(data.shopInfo)
				
				//4.保存商品的详情数据
				this.detailInfo = data.detailInfo
				
				//5.获取参数的信息
				this.paramInfo = new GoodsParam(
					data.itemParams.info, 
					data.itemParams.rule
				);
				//6.获取评论信息
				if(data.cRate !== 0) {
					this.commentInfo = data.rate.list[0];
				}
			})
			
			//.1获取推荐数据		
			getRecommend().then((res) => {
				//console.log(res)
				this.recommend = res.data.data.list
			})
	
		},

		methods:{
				...mapActions(['addCart']),
			imgageLoad(){
				this.$refs.scroll.refresh()
			
			this.$nextTick(() => {
				this.themeTopYs = [];
				this.themeTopYs.push(0)
				this.themeTopYs.push(this.$refs.param.$el.offsetTop)
				this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
				this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
				this.themeTopYs.push(Number.MAX_VALUE)
				console.log(this.themeTopYs)
			})
				
			},
			NavBarTitle(index){
				this.$refs.scroll.scrollTo(0, -this.themeTopYs[index]);
			},
			//一箭回到顶部
			BackTop(){
				this.$refs.scroll.scrollTo(0, 0)
			},
			//一箭回到顶部
			contentScroll(position){
				//1.判断BakcTop是否显示
				this.isShowTop = (-position.y) >1000;
				
				//2.
				//2.1获取y值
				const positionY = -position.y;
				
				//2.2position y和主题中值进行对比
				let length = this.themeTopYs.length;
				for(let i = 0; i < this.themeTopYs.length-1; i++) {
					if(this.currentIndex !== i && (positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i+1])){
						this.currentIndex = i;
						this.$refs.nav.currentIndex = this.currentIndex
					}
				}
			},
			//购物车添加
			addToCart(){
				//1.获取购物车需要展示的信息
				const producrt = {}
				producrt.image = this.topImages[0];
				producrt.title = this.goods.title;
				producrt.desc = this.goods.desc;
				producrt.price = this.goods.realPrice;
				producrt.iid = this.iid;
				
				//2.将商品添加到购物车里 (1.Promise, mapActions)两个知识点要考重点
				//this.$store.commit('addCart', producrt)
				this.addCart(producrt).then(res => {
					// this.show = true;
					// this.message = res;
					
					// setTimeout(() => {
					// 	this.show = false;
					// 	this.message = '';
					// },1500)
					this.$toast.show(res)
					
					
				})
				
				// this.$store.dispatch('addCart',producrt).then(res => {
				// 	console.log(res)
				// })
			}
			
			
		}
		
	}
</script>

<style scoped>
	#detail{
		position: relative;
		z-index: 9;
		height: 100vh;
		background-color: #fff;
		z-index: 10;
		
	}
	.detail-nav{
		position: relative;
		z-index: 9;
		background-color: #fff;
	} 
	.content{
		height: calc(100% - 44px - 49px);
		overflow: hidden;
	}
</style>
